<template>
    <div class="capital">
        <select-month></select-month>
        <!-- 支出 -->
        <div class="expenditure">
            <main-title> <span slot="txt" class="txt">支出</span> </main-title>
            <!-- 实际支出 / 预算支出 -->
            <view-item>
                <div slot="itemData" class="itemData actual_budget">
                    <div class="actual">
                        <p class="title">实际支出</p>
                        <div class="num">
                            <span class="inline-flex-ib">95,763<i>.77</i></span>
                            <i class="units">万元</i>
                        </div>
                    </div>
                    <div class="budget">
                        <p class="title">预算支出</p>
                        <div class="num">
                            <span class="inline-flex-ib">943<i>.21</i></span>
                            <i class="units">万元</i>
                        </div>
                    </div>
                </div>
            </view-item>
            <!-- 集团支出 -->
            <div class="expend">
                <item-title> <span slot="txt" class="txt">公司支出</span> </item-title>
                <view-item class="chartItem">
                    <div slot="itemData" class="itemData">
                        <div class="chartTips">单位:万元</div>
                        <bar-charts v-model="expendArr" :option="expendOption"></bar-charts>
                    </div>
                </view-item>
            </div>
        </div>
        <!-- 回款 -->
        <div class="returned">
          <main-title> <span slot="txt" class="txt">回款</span> </main-title>
          <!-- 实际回款 / 预算回款 -->
          <view-item>
                <div slot="itemData" class="itemData actual_budget">
                    <div class="actual">
                        <p class="title">实际回款</p>
                        <div class="num">
                            <span class="inline-flex-ib">195,763<i>.77</i></span>
                            <i class="units">万元</i>
                        </div>
                    </div>
                    <div class="budget">
                        <p class="title">预算回款</p>
                        <div class="num">
                            <span class="inline-flex-ib">200<i>.21</i></span>
                            <i class="units">万元</i>
                        </div>
                    </div>
                </div>
            </view-item>
            <!-- 回款流入 -->
            <div class="returnedMoney">
              <item-title> <span slot="txt" class="txt">回款流入</span> </item-title>
              <view-item class="chartItem">
                <div slot="itemData" class="itemData">
                  <div class="chartTips">单位:万元</div>
                  <bar-charts v-model="returnedMoneyArr" :option="returnedMoneyOption"></bar-charts>
                </div>
              </view-item>
            </div>
        </div>
        <!-- 差额 -->
        <div class="difference">
          <main-title> <span slot="txt" class="txt">差额</span> </main-title>
          <view-item>
            <div slot="itemData" class="itemData">
              <div class="left actual_budget">
                <div class="actual">
                  <p class="title">实际收支差额</p>
                  <div class="num">
                    <span class="inline-flex-ib">63<i>.77</i></span>
                    <i class="units">万元</i>
                  </div>
                </div>
                <div class="budget">
                  <p class="title">预算收支差额</p>
                  <div class="num">
                    <span class="inline-flex-ib">43<i>.21</i></span>
                    <i class="units">万元</i>
                  </div>
                </div>
              </div>
              <em></em>
              <div class="right">
                <div class="actual">
                  <p class="title">期初余额</p>
                  <div class="num">
                    <span class="inline-flex-ib">724,763<i>.77</i></span>
                    <i class="units">万元</i>
                  </div>
                </div>
                <div class="budget">
                  <p class="title">期末余额</p>
                  <div class="num">
                    <span class="inline-flex-ib">825,763<i>.77</i></span>
                    <i class="units">万元</i>
                  </div>
                </div>
              </div>
            </div>
          </view-item>
        </div>
    </div>
</template>

<script>
import pieChart from "@/components/Chart/pieChart";
import barCharts from "@/components/Chart/barCharts";
import itemTitle from "@/components/bossVersion/itemTitle";
import viewItem from "@/components/bossVersion/viewItem";
import mainTitle from "@/components/bossVersion/mainTitle";
import selectMonth from "@/components/bossVersion/selectMonth";
export default {
  components: {
    pieChart,
    barCharts,
    itemTitle,
    viewItem,
    mainTitle,
    selectMonth
  },
  data() {
    return {
      returnedMoneyArr: [], // 回款流入
      expendArr: [], // 集团支出
      // 回款流入 option
      returnedMoneyOption: {
        dataZoom: [
          {
            type: "inside"
          },
          {
            type: "slider",
            show: false
          }
        ],
        hidePieMargin: true,
        color: ["#FF7145","#f0bd26"],
        legend: {
          top: -5,
          right: "0%",
          data: [
            {
              icon: "rect"
            },
            {
              icon: "rect"
            }
          ]
        },
        grid: {
          top: "20%",
          left: "10%",
          height: "60%"
        },
        xAxis: {
          axisLabel: {
            rotate: 0
          }
        },
        labelDefault: 2
      },
      // 集团支出 option
      expendOption: {
        dataZoom: [
          {
            type: "inside"
          },
          {
            type: "slider",
            show: false
          }
        ],
        hidePieMargin: true,
        color: ["#FF7145","#f0bd26"],
        legend: {
          top: -5,
          right: "0%",
          data: [
            {
              icon: "rect"
            },
            {
              icon: "rect"
            }
          ]
        },
        grid: {
          top: "20%",
          left: "10%",
          height: "40%"
        },
        xAxis: {
          axisLabel: {
            rotate: 45
          }
        },
        labelDefault: 2
      }
    };
  },
  mounted() {
    this.setData();
  },
  methods: {
    setData() {
      var newList = [
        {
          name: "人员工资",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "实际", value: 24, percent: null },
            { name: "预算", value: 44, percent: null }
          ]
        },
        {
          name: "财务",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "实际", value: 28, percent: null },
            { name: "预算", value: 44, percent: null }
          ]
        },
        {
          name: "投资",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "实际", value: 27, percent: null },
            { name: "预算", value: 44, percent: null }
          ]
        },
        {
          name: "税务",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "实际", value: 26, percent: null },
            { name: "预算", value: 44, percent: null }
          ]
        },
        {
          name: "金融还贷",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "实际", value: 25, percent: null },
            { name: "预算", value: 44, percent: null }
            
          ]
        },
        {
          name: "临时拆借",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "实际", value: 65, percent: null },
            { name: "预算", value: 44, percent: null }
            
          ]
        },
        {
          name: "其他",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "实际", value: 33, percent: null },
            { name: "预算", value: 44, percent: null }
            
          ]
        }
      ];
      this.$set(this, "expendArr", newList);
      var newList2 = [
        {
          name: "地产",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "实际", value: 24, percent: null },
            { name: "预算", value: 44, percent: null }
            
          ]
        },
        {
          name: "融资",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "实际", value: 28, percent: null },
            { name: "预算", value: 44, percent: null }
            
          ]
        },
        {
          name: "房联行",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "实际", value: 27, percent: null },
            { name: "预算", value: 44, percent: null }
            
          ]
        },
        {
          name: "其他",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "实际", value: 26, percent: null },
            { name: "预算", value: 44, percent: null }
            
          ]
        }
      ];
      this.$set(this, "returnedMoneyArr", newList2);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/bossVersion/_basics";

.capital {
  line-height: 1;
  .item {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 1.35rem;
    // 实际支出 / 预算支出
    .actual_budget {
      @include flexFdcYcen;
      margin-left: 0.18rem;
      // 实际
      & > .actual {
        margin-bottom: 0.08rem;
        color: $color3;
        & > .title {
          margin-bottom: 0.03rem;
          @include bold(0.14rem);
        }
        & > .num {
          & > span {
            @include din(0.34rem);
            & > i {
              font-size: 0.15rem;
            }
          }
          & > .units {
            font-size: 0.12rem;
          }
        }
      }
      // 预算
      & > .budget {
        color: $budget;
        & > .title {
          margin-bottom: 0.03rem;
          @include bold(0.12rem);
        }
        & > .num {
          & > span {
            @include din(0.2rem);
            & > i {
              font-size: 0.12rem;
            }
          }
          & > .units {
            font-size: 0.12rem;
          }
        }
      }
    }
    .chartTips {
      @include absoluteTLSide(0, 0, 1);
    }
  }
  .chartItem {
    height: 1.65rem;
  }
  // 板块借支
  .borrowing {
    & > .chartItem {
      & > .itemData {
        @include flexYcen;
        // padding: 0.19rem 0;
        & > .left {
          flex: 1;
        }
        & > em {
          width: 1px;
          height: 1.25rem;
          background-color: $color9;
        }
        & > .right {
          width: 1.07rem;
          text-align: center;
          & > .title {
            color: $color1;
            font-size: 0.12rem;
            line-height: 1.5;
          }
        }
      }
    }
  }
  // 差额
  .difference {
    .item {
      .itemData {
        @include flexXjsbYcen;
      }
      .left, .right {
        width: calc(100% / 2 - 0.3rem);
      }
      em {
        width: 1px;
        height: 0.95rem;
        background-color: $color9;
      }
      .right {
        & > .actual {
          margin-bottom: 0.08rem;
          color: $color4;
          & > .title {
            margin-bottom: 0.03rem;
            @include bold(0.12rem);
          }
          & > .num {
            & > span {
              @include din(0.2rem);
              & > i {
                font-size: 0.12rem;
              }
            }
            & > .units {
              font-size: 0.12rem;
            }
          }
        }
        // 预算
        & > .budget {
          color: $color1;
          & > .title {
            margin-bottom: 0.03rem;
            @include bold(0.12rem);
          }
          & > .num {
            & > span {
              @include din(0.2rem);
              & > i {
                font-size: 0.12rem;
              }
            }
            & > .units {
              font-size: 0.12rem;
            }
          }
        }
      }
    }
  }
}
</style>
